{% extends "../base.html" %}
{% load admin_utils %}

{% block main_content %}
<div id="application-engine-custom-domain">
    <bk-button :theme="'primary'" :title="'主要按钮'" class="mr10" @click="handleCreate">
        添加独立域名
    </bk-button>

    <bk-table
        :data="domainList"
        style="margin-top: 15px;">
        <bk-table-column label="模块" prop="module_name">
        </bk-table-column>
        <bk-table-column label="环境" prop="environment_name">
            <template slot-scope="props">
                $[ props.row.environment_name | env2zh ]
            </template>
        </bk-table-column>
        <bk-table-column label="域名" prop="domain_name"></bk-table-column>
        <bk-table-column label="路径" prop="path_prefix"></bk-table-column>
        <bk-table-column label="操作" width="150">
            <template slot-scope="props">
                <bk-button theme="primary" text :disabled="props.row.status === '创建中'" @click="handleEdit(props.row)">编辑</bk-button>
                <bk-button theme="primary" text @click="handleDelete(props.row)" style="color: rgb(234, 54, 54);">删除</bk-button>
            </template>
        </bk-table-column>
    </bk-table>

    <bk-dialog v-model="dialog.visible" header-position="left" width="500" :confirm-fn="submitDialog">
        <div slot="header">
            $[ dialog.type === 'create'?'添加':(dialog.type === 'edit'?'编辑':'删除') ]独立域名
        </div>
        <bk-form :label-width="120" :model="dialog.form">
            <bk-form-item label="模块" :required="true">
                <bk-select v-model="dialog.form.module_name" :disabled="dialog.type === 'delete'">
                    <bk-option v-for="module in modules"
                        :key="module.id"
                        :id="module.name"
                        :name="module.name">
                    </bk-option>
                </bk-select>
            </bk-form-item>
            <bk-form-item label="环境" :required="true">
                <bk-select v-model="dialog.form.environment_name" :disabled="dialog.type === 'delete'">
                    <bk-option v-for="env in envChoices"
                        :key="env.value"
                        :id="env.value"
                        :name="env.text">
                    </bk-option>
                </bk-select>
            </bk-form-item>
            <bk-form-item label="域名" :required="true">
                <bk-input v-model="dialog.form.domain_name" :disabled="dialog.type === 'delete'"></bk-input>
            </bk-form-item>
            <bk-form-item label="路径" :required="true">
                <bk-input v-model="dialog.form.path_prefix" :disabled="dialog.type === 'delete'"></bk-input>
            </bk-form-item>
            <bk-form-item label="HTTPS 模式" :required="true">
                <bk-switcher v-model="dialog.form.https_enabled" :disabled="dialog.type === 'delete'"></bk-switcher>
            </bk-form-item>
        </bk-form>
    </bk-dialog>
</div>
{% endblock %}

{% block main_script %}
<script>
    const application = {{ application | to_json }}

    const modules = {{ modules | to_json }}

    const envChoices = {{ env_choices | to_json }}

    const URLRouter = {
        list: decodeURI("{% url 'wl_api.application.domains' application.code %}"),
        create: decodeURI("{% url 'wl_api.application.domains' application.code %}"),
        {# Use an integer "65535" as the ID placeholder in order to call url #}
        detail: decodeURI("{% url 'wl_api.application.domain_by_id' application.code 65535 %}"),
    }

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            mixins: [SubmitMixin],
            el: "#application-engine-custom-domain",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    domainList: [],
                    application,
                    modules,
                    envChoices,
                    dialog: {
                        visible: false,
                        type: "create",
                        form: {
                            id: '',
                            module: '',
                            environment_name: '',
                            domain_name: '',
                            path_prefix: '',
                            https_enabled: false
                        }
                    }
                }
            },
            mounted: function () {
                this.fetchDomainList()
            },
            methods: {
                fetchDomainList: async function () {
                    const el = this.$bkLoading({title: '加载中'})
                    try {
                        await this.$http.get(URLRouter.list).then(res => {
                            this.domainList = res
                        })
                    } finally {
                        el.hide = true
                    }
                },
                handleCreate: function () {
                    this.dialog.type = "create"
                    this.dialog.visible = true
                    this.dialog.form.domain_name = ""
                    this.dialog.form.path_prefix = "/"
                    this.dialog.form.https_enabled = false
                },
                handleEdit: function (row) {
                    this.dialog.type = "edit"
                    this.dialog.visible = true
                    this.dialog.form.id = row.id
                    this.dialog.form.module_name = row.module_name
                    this.dialog.form.environment_name = row.environment_name
                    this.dialog.form.domain_name = row.domain_name
                    this.dialog.form.path_prefix = row.path_prefix
                    this.dialog.form.https_enabled = row.https_enabled
                },
                handleDelete: function (row) {
                    this.dialog.type = "delete"
                    this.dialog.visible = true
                    this.dialog.form.id = row.id
                    this.dialog.form.module_name = row.module_name
                    this.dialog.form.environment_name = row.environment_name
                    this.dialog.form.domain_name = row.domain_name
                    this.dialog.form.path_prefix = row.path_prefix
                    this.dialog.form.https_enabled = row.https_enabled
                },
                fillUrlTemplate: function (url_template, {form}) {
                  // Replace the placeholder in the tail of the URL
                  return url_template.replace(/\/65535\/$/, `/${form.id}/`)
                },
                submitCallback: function () {
                     this.fetchDomainList()
                }
            }
        })
    })
</script>
{% endblock %}
